<template>
    <view class="login-container">
        <!-- 手机号输入框 -->
        <view class="input-group">
            <text class="label">手机号</text>
            <input
                class="input"
                type="number"
                v-model="phoneNumber"
                placeholder="请输入手机号码"
                maxlength="11"
            />
        </view>

        <!-- 验证码输入框和发送按钮 -->
        <view class="input-group">
            <text class="label">验证码</text>
            <input
                class="input verification-input"
                type="number"
                v-model="verificationCode"
                placeholder="请输入验证码"
                maxlength="6"
            />
            <button
                class="send-btn"
                :class="{ disabled: isCoolingDown || !isPhoneValid }"
                :disabled="isCoolingDown || !isPhoneValid"
                @tap="handleSendVerificationCode"
            >
                {{ buttonText }}
            </button>
        </view>

        <!-- 登录按钮 -->
        <button class="login-btn" :disabled="!isFormValid" @tap="handleLogin">
            登录
        </button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            phoneNumber: '', // 手机号
            verificationCode: '', // 验证码
            isCoolingDown: false, // 是否在冷却中
            countdown: 60, // 倒计时秒数
            timer: null // 定时器
        }
    },
    computed: {
        // 验证手机号格式
        isPhoneValid() {
            return /^1[3-9]\d{9}$/.test(this.phoneNumber)
        },
        // 验证表单是否可提交
        isFormValid() {
            return this.isPhoneValid && this.verificationCode.length === 6
        },
        // 按钮显示文本
        buttonText() {
            if (this.isCoolingDown) {
                return `${this.countdown}s后重新发送`
            }
            return '发送验证码'
        }
    },
    methods: {
        // 发送验证码
        async handleSendVerificationCode() {
            if (!this.isPhoneValid) {
                uni.showToast({
                    title: '请输入正确的手机号码',
                    icon: 'none'
                })
                return
            }

            if (this.isCoolingDown) return

            try {
                // 调用发送验证码接口
                // 这里替换为实际的API调用
                const res = await uni.request({
                    url: '/api/send-verification-code',
                    method: 'POST',
                    data: {
                        phone: this.phoneNumber
                    }
                })

                if (res.data.success) {
                    uni.showToast({
                        title: '验证码发送成功',
                        icon: 'success'
                    })
                    
                    // 开始冷却倒计时
                    this.startCountdown()
                } else {
                    uni.showToast({
                        title: res.data.message || '发送失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                uni.showToast({
                    title: '发送失败，请重试',
                    icon: 'none'
                })
            }
        },

        // 开始倒计时
        startCountdown() {
            this.isCoolingDown = true
            this.countdown = 60
            
            this.timer = setInterval(() => {
                this.countdown--
                
                if (this.countdown <= 0) {
                    clearInterval(this.timer)
                    this.isCoolingDown = false
                    this.countdown = 60
                }
            }, 1000)
        },

        // 处理登录
        async handleLogin() {
            if (!this.isFormValid) {
                uni.showToast({
                    title: '请填写完整信息',
                    icon: 'none'
                })
                return
            }

            try {
                // 调用登录接口
                const res = await uni.request({
                    url: '/api/login',
                    method: 'POST',
                    data: {
                        phone: this.phoneNumber,
                        code: this.verificationCode
                    }
                })

                if (res.data.success) {
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success'
                    })
                    
                    // 登录成功后的操作，比如跳转页面
                    uni.switchTab({
                        url: '/pages/home/index'
                    })
                } else {
                    uni.showToast({
                        title: res.data.message || '登录失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                uni.showToast({
                    title: '登录失败，请重试',
                    icon: 'none'
                })
            }
        }
    },
    // 组件销毁时清除定时器
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer)
        }
    }
}
</script>

<style>
.login-container {
    padding: 40rpx;
}

.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;
}

.label {
    width: 140rpx;
    font-size: 32rpx;
    color: #333;
}

.input {
    flex: 1;
    height: 80rpx;
    font-size: 32rpx;
}

.verification-input {
    margin-right: 20rpx;
}

.send-btn {
    width: 200rpx;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 28rpx;
    color: #007AFF;
    background: none;
    border: 1rpx solid #007AFF;
    border-radius: 10rpx;
}

.send-btn.disabled {
    color: #999;
    border-color: #ccc;
    background-color: #f5f5f5;
}

.login-btn {
    margin-top: 60rpx;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #007AFF;
    border-radius: 10rpx;
}

.login-btn:disabled {
    background-color: #ccc;
}
</style>